<template>
<div>
    <el-table :data="powerData" border style="width: 100%">
      <el-table-column fixed prop="name" label="权限名称"> </el-table-column>
      <el-table-column prop="url" label="权限路径">
      </el-table-column>
      <el-table-column prop="type" label="权限类型" :formatter="typeFormatter"> </el-table-column>
      <el-table-column prop="status" label="状态" :formatter="statusFormatter"> </el-table-column>
      <el-table-column prop="pid" label="父亲节点"> </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="insertPermission()">新增</el-button>
          <el-button @click="deletePermission(scope.row.id)" type="text" size="small">删除</el-button>
          <el-button type="text" size="small" @click="updatePermission(scope.row.id)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @next-click="queryNextPage"
      @prev-click="queryPrePage"
      @size-change="sizeChange"
      @current-change="currentChange"
      :page-size="pageSize"
      :page-sizes="pageSizes"
      background
      layout="prev, pager, next,sizes,jumper, total"
      :total="total">
    </el-pagination>
  </div>  
</template>

<script>

export default {
  methods: {
    insertPermission(){
        this.$router.push("/toInsertPermission");
    },
    deletePermission(id) {
      var app = this;
      this.$httpRequest.get("power/deleteById/" + id, {})
        .then(function () {
          if (data.code == 200) {
              console.log("删除成功");
              app.$message({
                showClose: true,
                message: "删除成功",
                type: "success",
              });
              }
          app.$router.push("/toPermission");
        })
        .catch(function (error) {
          //失败后调用
        })
        .then(function () {
          //不论成功或者失败后都调用
        });
    },
    statusFormatter(row, column, cellValue, index) {
      return cellValue == 1 ? "启用" : "禁用";
    },
    typeFormatter(row, column, cellValue, index){
      return cellValue == 1 ? "目录" : "菜单";
    },
    queryNextPage(page) {
      this.current = page;
      this.getPermissionPage();
    },
    queryPrePage(page) {
      this.current = page;
      this.getPermissionPage();
    },
    sizeChange(page) {
      this.pageSize = page;
      this.getPermissionPage();
    },
    currentChange(page) {
      this.current = page;
      this.getPermissionPage();
    },
    getPermissionPage() {
      var app = this;
      this.$httpRequest.post("power/page", {
          current: app.current,
          size: app.pageSize,
        })
        .then(function({data}) {
          //成功后调用
          console.log("成功", data);
          app.powerData = data.page.records;
          app.current = data.page.current;
          app.size = data.page.size;
          app.total = data.page.total;
        })
        .catch(function (error) {
          //失败后调用
        })
        .then(function () {
          //不论成功或者失败后都调用
        });
    },
    updatePermission(id){
      this.$router.push("/toInsertPermission/"+id);
    }
  },
  data() {
    return {
      total: 10, //总页数
      pageSize: 5, //每页数量
      pageSizes: [5, 10, 20],
      current: 1, //当前页
      powerData: [
        {
          name: "",
          url: "",
          type: "",
          status: "",
          pid: "",
        },
      ],
    };
  },
  mounted: function () {
    //页面加载时调用
    this.getPermissionPage();
  },
};
</script>

<style>

</style>